<template>
    <div>
        <h3>房号信息列表</h3>
        <input type="button" value="新增" class="btn btn-primary" @click="router.push('/houseNoAdd')">
        <input type="button" value="批量上架" class="btn btn-primary" @click="UpdHouseNoState">
        <input type="button" value="批量删除" class="btn btn-danger" @click="AllDel">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th><input type="checkbox" v-model="checked" @change="AllSelect"></th>
                    <th>房型名称</th>
                    <th>房间号码</th>
                    <th>房间描述</th>
                    <th>状态</th>
                </tr>
                <tr v-for="itme in data.list">
                    <td><input type="checkbox" v-model="ids" :value="itme.Id" @change="FanSelect"></td>
                    <td>{{ itme.HouseTypeName }}</td>
                    <td>{{ itme.HouseNoName }}</td>
                    <td>{{ itme.Detail }}</td>
                    <td>{{ itme.State == 1 ? "上架" : "下架" }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';

const route = useRoute();
const router = useRouter();

onMounted(() => {
    GetHouseNO();
})

let data: any = reactive({
    list: [],
})

let checked = ref(false);
let ids = ref([]);



const GetHouseNO = () => {
    axios({
        method: "get",
        url: "/api/House/GetHouseNO",
    })
        .then(res => {
            data.list = res.data;
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })
}

const UpdHouseNoState = () => {
    if (ids.value.length == 0) {
        alert("至少选中一项");
        return;
    }
    if (!confirm("确定上架吗?")) {
        return;
    }
    axios({
        method: "put",
        url: "/api/House/UpdHouseNoState",
        params: {
            ids: ids.value.toString()
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert("修改成功")
                GetHouseNO();
            }
            else {
                alert("修改失败")
            }
            console.log(res);

        })
        .catch(err => {
            console.log(err);

        })
}

const AllDel = () => {
    if(ids.value.length==0){
    alert("至少选中一项");
    return;
}
if(!confirm("确定删除吗?")){
    return;
}
axios({
        method:"delete",
        url:"/api/House/DelHouseNO",
        params:{
            ids:ids.value.toString()
        }
    })
    .then(res=>{
       if(res.data>0){
        alert("删除成功")
        GetHouseNO();
       }
       else{
        alert("删除失败")
       }
        console.log(res);
        
    })
    .catch(err=>{
        console.log(err);
        
    })
}

const AllSelect = () => {
if(checked.value){
    ids.value=data.list.map((item:any)=>{
        return item.Id;
    })
}
else{
    ids.value=[];
}
}

const FanSelect = () => {
if(ids.value.length==data.list.length){
    checked.value=true;
}
else{
    checked.value=false;
}
}
</script>

<style scoped>
input{
    margin: 5px 5px;
}
</style>